<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="application/javascript">

        var statsdata = [30, 70]; // Testdata - representerer prosent, totalt 100




        function drawPieChart() {


            var canvas = document.getElementById('canvas');

            var lastendpoint = 0.0; // setter startpunkt

            var color = ["blue", "yellow", "green"]; //forskjellige farger til sektorene


            if (canvas.getContext) {

                var drw = canvas.getContext('2d');


                for(var i=0; i< statsdata.length; i++){

                    drw.beginPath();      //start
                    var percent = statsdata[i] / 100; //beregner hvor mange prosent av sirkelen "kaken" skal utgjøre

                    drw.lineTo(100,100); //tegner linje til sentrum fra "kakens" startpunkt

                    drw.arc(100,100,50,lastendpoint, lastendpoint + percent *2*Math.PI, false); //tegner delen av sirkelen

                    drw.lineTo(100,100); //tegner linje til sentrum fra "kakens" endepunkt
                    drw.stroke();
                    drw.fillStyle = color[i];
                    drw.fill();
                    drw.stroke();
                    lastendpoint += (percent *2*Math.PI); //oppdaterer startpunkt til neste løkkegjennomgang
                    alert(lastendpoint);

                }

            }
        }
    </script>
</head>

<body onload="drawPieChart()">
<canvas id="canvas" width="150" height="150" ></canvas>
</body>
</html>